// 程序员-数学-英文
// 业务程序员-熟练就行（努力理解，并且反复练习）
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 开发模式。如果是development的不会压缩代码
  mode: 'production', // production / development
  entry: path.join(__dirname, 'src/main.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      /**
       * webpack解析css /scss 使用了三个loader
       * @name [vue-style-loader] :将 JS 字符串生成为 style 节点，把 CSS 插入到 DOM 中。
       * @name [css-loader]: 将 CSS 转化成 CommonJS 模块 (webpack是node包，node的模块化是commonJS)
       * webpack要把css转换成自己认识的模块，webpack就是认识commonJS/umd
       * <style>.movie-header{}  </style>
       * @name [sass-loader] 将 sass 编译成 CSS
       * sass sass-loader配合一起使用
       * 代码的执行顺序是从右边往左，
       */
      {
        test: /\.css|scss$/,
        use: ['vue-style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
    }),
    new VueLoaderPlugin(),
  ],
  devServer: {
    port: 8080,
    hot: true,
    open: true,
    // 接口代理（解决跨域问题）
    proxy: {
      /**
       * axios.get('/api/tab')
       *  http://localhost:3000/api/tab
       */
      // '/api': {
      //   // /api === http://localhost:3000
      //   target: 'http://localhost:3000',
      // },
      '/api': 'http://localhost:3000',
    },
  },
  // // 别名
  // resolve: {
  //   // @ -> src
  //   alias: {
  //     '@': path.resolve('src'),
  //   },
  // },
}
